<template>
  <div class="DataCheckbox">
    <div class="tipbox">
        <div class="leftspan">
          <span>公司名称</span>
          <span>
            <el-input v-model="manageName" size="small" placeholder="请输入公司名称"></el-input>
          </span>
          <span>订阅状态</span>
          <span>
            <el-radio-group v-model="analysisStatus">
              <el-radio label="1">启用</el-radio>
              <el-radio label="0">停用</el-radio>
            </el-radio-group>
          </span>
        </div>
        <div>
          <el-button size="small" @click="chongzhi">重置</el-button>
          <el-button type="primary" size="small" @click="gettablelist">查询</el-button>
        </div>
      </div>
      <div class="bodybox">
        <div class="title">
          <div>数据检查订阅情况</div>
          <div class="butexp">
            <el-button class="moban"  type="primary" size="small" @click="dialogVisible=true"><i class="el-icon-plus" ></i> 新增规则</el-button>
            <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
        <div class="table">
          <TableColumn
            ref="tabledata"
            :tableData="tableData" 
            :tableConfig="tableConfig" 
            :issize="issize">
            <el-table-column
              label="状态"
              align="center">
              <template #default="{row}">
                <div >
                  <span :style="{'background-color':+row.analysisStatus?'#b8e412':'#ff0000'}" class="status">{{ +row.analysisStatus?'启用':'停用' }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center">
              <template #default="{row}">
                <span>
                  <el-tooltip class="item" effect="dark" content="浏览" placement="top">
                    <i  @click="bianji(row,'look')" class="el-icon-view" style="color: #1a90fe;cursor: pointer;"></i>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <i @click="bianji(row)" class="el-icon-edit" style="color: #1a90fe;cursor: pointer;margin-left: 30px;"></i>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <i @click="deletelist(row)" class="el-icon-delete" style="color: red;cursor: pointer;margin-left: 30px;"></i>
                  </el-tooltip>
                </span>
              </template>
            </el-table-column>
          </TableColumn>
        </div>
          <!-- 底部分页 -->
          <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="page.pageNo"
            :page-size="20"
            @current-change="gettablelist"
            :total="+totalCount">
          </el-pagination>
        </div>
        <div class="dialog">
          <el-dialog
            title="分组信息"
            :visible.sync="dialogVisible"
            width="30%">
            <div>
              <el-form ref="form" :model="form" label-width="100px">
                <el-col :span="24">
                  <el-form-item label="公司">
                    <el-select v-model="form.manageName"  size="small" ref="renyuan" style="width: 100%;">
                      <el-option class="option"  :label="form.manageName" value="value" >
                        <el-tree
                          ref="tree"
                          :props="props"
                          :highlight-current="true"
                          @node-click="handleNodeClick"
                          :load="loadNode"
                          lazy>
                        </el-tree>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="订阅状态">
                    <el-radio-group v-model="form.analysisStatus">
                      <el-radio label="1">启用</el-radio>
                      <el-radio label="0">停用</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" size="small">取 消</el-button>
              <el-button type="primary" @click="submit" v-show="isshow" size="small">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
  </div>
</template>

<script>
import {getgenjieapi, getyewuzhuzhiapi} from '@/api/prwpaid/configura/ccb'
import {getdingyuelistapi,getpostadddingyueapi,postupdatedingyueapi,postdeldingyueapi} from '@/api/system/CheckRules'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TableColumn,
    TopTile
  },
  data() {
    return {
      analysisStatus:'',
      form:{analysisStatus:'1',manageNo:''},
      manageName: '',
      dialogVisible:false,
      issize:'medium',
      tableData: [],
      options:[],
      tableConfig: [
        { label: '序号', type: 'index',width:'70' ,center: 'center'},
        {label:'公司名称',prop:'manageName'},
      ],
      totalCount: '',
      page: {
        pageNo: 1,
        pageSize:20
      },
      props: {
        label: 'bizOrgName',
        disabled: 'disabled'
      },
      isflag: false,
      isshow:true
    };
  },

  mounted() {
    this.gettablelist()
  },

  methods: {
    // 新增/修改确认
    submit() {
      this.isflag?postupdatedingyueapi(this.form).then(res => {
        this.$message({
              type:res.code=='200'?'success':'warning',
              message:res.code=='200'?'编辑成功':res.message
         })
      }): getpostadddingyueapi(this.form).then(res => {
        this.$message({
              type:res.code=='200'?'success':'warning',
              message:res.code=='200'?'新增成功':res.message
         })
      })
      this.gettablelist()
      this.quxiao()
    },
    // 弹窗取消
    quxiao() {
      this.dialogVisible = false
    },
    // 树节点点击
    handleNodeClick(val) {
      this.$set(this.form,'manageName',val.bizOrgName)
      this.$set(this.form,'manageNo',val.bizOrgNo)
      this.$refs.renyuan.blur()
    },
    // 编辑
    bianji(row,val) {
      this.isflag=true
      this.dialogVisible=true
      this.form = { ...row }
      if (val == 'look') {
        this.isshow=false
      }
    },
    // 删除分组
    deletelist(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          postdeldingyueapi(row.manageNo).then(res => {
            this.$message({
              type:res.code=='200'?'success':'warning',
              message:res.code=='200'?'删除成功':res.message
            })
          })
          this.gettablelist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取表格数据
    async gettablelist() {
      this.$refs.tabledata.loading=true
      const { data: { list,totalCount } } = await getdingyuelistapi({
        pageNo:this.page.pageNo-1,pageSize:this.page.pageSize,analysisStatus:this.analysisStatus,manageName:this.manageName
      })
      this.totalCount = totalCount
      this.tableData=list
      this.$refs.tabledata.loading=false
    },
    // 重置
    chongzhi() {
      this.analysisStatus = ''
      this.manageName = ''
      this.gettablelist()
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('sst-microservice-biz/sst/data/check/set/export',{
        pageNo:this.page.pageNo-1,pageSize:this.page.pageSize,analysisStatus:this.analysisStatus,manageName:this.manageName
      },'数据检查订阅')
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
       // 树组件懒加载
    async loadNode (node, resolve) {
      const res = await getgenjieapi()
      if (node.level === 0) {
        // 初始的级数（最顶层）
        return resolve(res.data.list) // 最顶层数据渲染为region
      }
      const ress = await getyewuzhuzhiapi({ parentOrgNo: node.data.bizOrgNo })
      if (node.level >0) {
        return resolve(ress.data.list)
      }
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.isflag = false
        this.isshow=true
        this.form={analysisStatus:'1',manageNo:''}
      }
    }
  }
};
</script>

<style scoped>
.DataCheckbox{
    padding: 10px;
    height: 100%;
    .tipbox{
      height: 80px;
      background-color: #fff;
      line-height: 80px;
      padding: 0 20px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .leftspan{
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #606266;
        span{
          margin-right: 15px;
        }
      }
    }
    .bodybox{
      height: calc(100% - 90px);
      padding: 20px;
      background-color: #fff;
      .title{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
          .butexp{
            display: flex;
            .moban{margin-right: 10px;}
          }
      }
      .table{
        height: 88%;
        .status{
            color: #fff;
            display: inline-block;
            padding: 5px 10px;
            border-radius: 5px; 
          }
      }
      .fenye{
        text-align: right;
        margin-top: 10px;
      }
    }
  }
::v-deep .el-dialog__footer{
  text-align: center;
}
.option{
  height:auto;
}
</style>